<template>
  <div class="myGoodsReviews">
    <div class="dataListWrap" v-show="!isMyGoodsReviewsInfo">
      <div class="dataList">
        <div class="dataDiv" v-for="(item,index) in dataList">
          <img class="dataDivLeft" :src="item.pic" alt="">
          <div class="dataDivRight">
            <p class="dataDivRightA">
              <span>{{item.name}}</span>
              <span>{{item.commentCount}}人评价</span>
            </p>
            <p class="dataDivRightB">ID: {{item.productSn}}</p>
            <p class="dataDivRightC">¥{{item.price}}</p>
            <p class="dataDivRightD">宝贝上架时间</p>
            <p class="dataDivRightE">{{item.commentLastTime}}</p>
            <p class="dataDivRightF" @click="showReviewsInfo(index)">查看评论详情</p>
          </div>
        </div>
      </div>
      <div class="dataListPages">
        <!-- 商品分页器 -->
        <el-pagination id="pagination" style="text-align: right;" background layout="prev, pager, next" :page-size="4"
          :page-count="data" prev-text="  上一页  " next-text="下一页  " @current-change="handleCurrentChange" :total="dataTotal">
        </el-pagination>
      </div>
    </div>
    <!-- 显示具体的单个商品的具体评价 -->
    <div v-show="isMyGoodsReviewsInfo" class="myGoodsReviewsInfo">
      <div class="myGoodsReviewsInfoWrap">
        <!-- ×号关闭具体评价 -->
        <p class="myGoodsReviewsBack"><span @click="showReviewsInfoNo">×</span></p>
        <!-- 商品信息 -->
        <div class="reviewsInfoHeader" v-for="(itemShop, indexShop) in dataListInfo.shop">
          <!--商品主图-->
          <img class="reviewsInfoHeaderLeft" :src="itemShop.pic" alt="">
          <div class="reviewsInfoHeaderRight">
            <p class="reviewsInfoHeaderRightA">{{itemShop.name}}</p>
            <p class="reviewsInfoHeaderRightB">ID:{{itemShop.productSn}}</p>
            <p class="reviewsInfoHeaderRightC">¥{{itemShop.price}}</p>
            <p class="reviewsInfoHeaderRightD">宝贝上架时间</p>
            <p class="reviewsInfoHeaderRightE">{{itemShop.commentLastTime}}</p>
            <p class="reviewsInfoHeaderRightF">{{itemShop.commentCount}}已评价</p>
          </div>
        </div>
        <!-- 评论信息 -->
        <div class="reviewsInfoConent">
          <!--头部标题-->
          <div class="reviewsInfoConentTop">
            <p>评价内容</p>
            <p>评价人</p>
            <p>宝贝信息</p>
            <p></p>
          </div>
          <!--评价列表-->
          <div class="reviewsInfoConentCenter" v-for="(itemInfo, indexInfo) in dataListInfo.info">
            <!--评价-->
            <div class="reviewsInfoConentCenterDiv">
              <!--评价内容-->
              <div class="reviewsInfoConentCenterDivA reviewsInfoConentCenterDivDiv">
                <p>{{itemInfo.comment}}</p>
                <p>{{itemInfo.gmtCreate}}</p>
              </div>
              <!--评价人-->
              <div class="reviewsInfoConentCenterDivB reviewsInfoConentCenterDivDiv">
                <p>买家：<span>{{itemInfo.userName}}</span></p>
              </div>
              <!--宝贝信息-->
              <div class="reviewsInfoConentCenterDivC reviewsInfoConentCenterDivDiv">
                <p>{{itemInfo.gmtCreate}}</p>
                <p>尺码: {{itemInfo.size}}</p>
                <p>颜色: {{itemInfo.productAttr}}</p>
                <p>¥{{itemInfo.price}}</p>
              </div>
              <!--操作-->
              <div class="reviewsInfoConentCenterDivD reviewsInfoConentCenterDivDiv">
                <!--点击回复信息-->
                <p :id="itemInfo.response?'':'red'" @click="writeBack(indexInfo)">
                  <i :id="itemInfo.response?'':'red'" class="iconfont icon-xiaoxi"></i>回复
                </p>
              </div>
            </div>
            <!--回复-->
            <div v-if="itemInfo.list" class="reviewsInfoConentCenterDivTwo">
              <div class="reviewsInfoConentCenterDivTwoA">
                <i class="iconfont icon-kefuwangwang"></i>
                <span>{{itemInfo.list[0].productName}} </span>
                <span>[{{itemInfo.list[0].gmtCreate}}]</span>
              </div>
              <p class="reviewsInfoConentCenterDivTwoB">{{itemInfo.list[0].comment}}</p>
            </div>
          </div>
        </div>
        <!-- 评论分页器 -->
        <div class="reviewsInfoFooter">
          <el-pagination id="paginationInfo" style="text-align: right;" background layout="prev, pager, next"
            :page-size="4" :page-count="commentTip" prev-text="  上一页  " next-text="下一页  " @current-change="handleCurrentChangeInfo"
            :total="commentTotal">
          </el-pagination>
        </div>
      </div>
    </div>
   <!-- 回复消息弹框 -->
   <div class="writeBackWrap" v-if="isWriteBack">
     <div class="writeBack">
       <p class="writeBackA">
         <span>回复{{writeName}}</span>
         <span @click="writeBackNo">×</span>
       </p>
       <div class="writeBackB">
         <textarea name="" v-model="commentBack" id="textarea" @input="writeTextareaChange"></textarea>
         <p><span>{{writeTextareaLength}}</span>/200</p>
       </div>
       <p class="writeBackC">
         <span @click="subComment">提交</span>
         <!--取消回复评论弹框-->
         <span @click="writeBackNo">取消</span>
       </p>
     </div>
   </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: "myGoodsReviews",
    data() {
      return {
        // 商品数据列表
        dataList: [],
        // 是否显示单个商品的详细评论
        isMyGoodsReviewsInfo: false,
        // 是否显示回复评论弹框
        isWriteBack: false,
        // 回复谁的评论
        writeName: "",
        // 回复评论的长度
        writeTextareaLength: 0,
        // 商品评论数据列表
        dataListInfo: {
          "shop": [],
          "info": [],
        },
        // 商品数据页码；
        dataPage: '1',
        // 商品列表总数
        dataTotal: 0,
        //商品总页数
        data:1,
        //商品评论页码
        commentPage: 1,
        //商品评论信息总条数;
        commentTotal: 0,
        //商品评论所传id;
        puductId: '',
        //回复买家评论字段
        commentBack:'',
        //评论条数页码
        commentTip:1
      }
    },
    methods: {
      // 显示商品的评论详情
      showReviewsInfo(index) {
        this.isMyGoodsReviewsInfo = true;
        this.dataListInfo.shop = [];
        this.dataListInfo.shop.push(this.dataList[index]);
        this.puductId = index;
        this.getComment();
      },
      // 隐藏商品的评论详情
      showReviewsInfoNo() {
        this.isMyGoodsReviewsInfo = false;
        this.dataList = [];
        this.getData()
      },
      // 回复评论弹框显示
      writeBack(index) {
        if (this.dataListInfo.info[index].list.length == 1) {
          this.$message.closeAll();
          this.$message("已经评论过了");
          return;
        }
        this.isWriteBack = true;
        this.writeName =index;
      },
      // 回复评论弹框里的文字域value改变事件
      writeTextareaChange() {
        this.writeTextareaLength = $("#textarea").val().length;
        if ($("#textarea").val().length >= 200) {
          alert("输入文字数量超出了限制!");
          return;
        }
      },
      // 回复评论弹框消失
      writeBackNo() {
        this.isWriteBack = false;
      },
      // 商品分页器更改页数
      handleCurrentChange(val) {
        this.dataPage = val;
        this.getData();
      },
      // 评论分页器更改页数
      handleCurrentChangeInfo(val) {
        this.commentPage = val;
        this.getComment();
      },
      // 评价商品的列表展示数据请求；
      getData() {
        var data = {
          "merchantId": "2",
          "pageNum": this.dataPage,
          "pageSize": 4,
          "storeId": "1"
        };
        axios.post("app/product/findProductsByStoreId", data).then(res => {
          if (res.status == "000000") {
            this.dataList = res.data.items;
            this.dataTotal = res.data.total;
            this.data= res.data.totalPage;
          } else {
            this.$message.closeAll();
            this.$message(res.message);
          }
          // 关闭加载框
        }).catch(error => {
          // 关闭加载框
          console.log(error);
        });
      },
      //评价信息的条数请求
      getComment() {
        var data = {
          "productId": this.dataList[this.puductId].id,
          "pageNum": this.commentPage,
          "pageSize": 4,
          "timestamp": Date.parse(new Date())
        };
        axios.post("product/comment/getComments", data).then(res => {
          if (res.status == "000000") {
            this.dataListInfo.info = res.data.items;
            this.commentTotal = res.data.total;
            this.commentTip=res.data.totalPage;
          } else {
            this.$message.closeAll();
            this.$message(res.message);
          }
          // 关闭加载框
        }).catch(error => {
          // 关闭加载框
          console.log(error);
        });
      },
      //回复买家评论
      subComment() {
        var data = {
            "comment":this.commentBack,
            "commentParentId":this.dataListInfo.info[this.writeName].commentId,
            "productId":this.dataList[this.puductId].id,
            "productName":this.dataList[this.puductId].name,
            "timestamp": Date.parse(new Date())
        }
        axios.post("product/comment/create", data).then(res => {
          if (res.status == "000000") {
            this.$message.closeAll();
            this.$message(res.message);
            this.isWriteBack = false;
            this.getComment();
            this.isMyGoodsReviewsInfo = true;
            this.commentBack='';
          } else {
            this.$message.closeAll();
            this.$message(res.message);
          }
          // 关闭加载框
        }).catch(error => {
          // 关闭加载框
          console.log(error);
        });
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

<style scoped>
  .myGoodsReviews {
    position: relative;
    margin-bottom: 30px;
  }

  .dataListWrap {
    background: #ffffff;
    padding: 25px;
  }

  /* 总数据框 */
  .dataList {}

  /* 单个数据框 */
  .dataDiv {
    height: 160px;
    width: 965px;
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
  }

  /* 单个数据框,左侧图片 */
  .dataDivLeft {
    float: left;
    width: 160px;
    height: 160px;
    background: orange;
    margin-right: 10px;
  }

  /* 单个数据框,右侧数据 */
  .dataDivRight {
    height: 160px;
    position: relative;
  }

  .dataDivRightA {
    font-size: 14px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(42, 145, 254, 1);
  }

  .dataDivRightA span:nth-child(1) {
    display: inline-block;
    width: 500px;
    height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(42, 145, 254, 1);
  }

  .dataDivRightA span:nth-child(2) {
    color: #E7261B;
    float: right;
  }

  .dataDivRightB {
    font-size: 12px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }

  .dataDivRightC {
    font-size: 12px;
    font-family: "PingFang-SC-Medium";
    font-weight: 500;
    line-height: 50px;
    color: rgba(231, 38, 27, 1);
  }

  .dataDivRightD {
    font-size: 12px;
    line-height: 30px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-top: 20px;
  }

  .dataDivRightE {
    font-size: 12px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .dataDivRightF {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    width: 110px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #FFFFFF;
    background: rgba(231, 38, 27, 1);
    border-radius: 11px;
    cursor: pointer;
  }

  /* 分页器 */
  .dataListPages {
    margin-top: 30px;
    margin-right: 20px;
  }


  /* 单个商品的详细评论框 */
  .myGoodsReviewsInfo {
    width: 1015px;
  }

  .myGoodsReviewsInfoWrap {
    background: #FFFFFF;
    padding: 10px 0 25px 25px;
  }

  /* ×按钮样式 */
  .myGoodsReviewsBack {
    overflow: hidden;
    clear: both;
  }

  .myGoodsReviewsBack span {
    font-size: 26px;
    float: right;
    margin-right: 20px;
    cursor: pointer;
    color: #999999;
  }

  /* 头部商品样式 */
  .reviewsInfoHeader {
    overflow: hidden;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }

  .reviewsInfoHeaderLeft {
    width: 160px;
    height: 160px;
    background: orange;
    float: left;
  }

  .reviewsInfoHeaderRight {
    position: relative;
    width: 800px;
    height: 160px;
    float: right;
    margin-right: 20px;
  }

  .reviewsInfoHeaderRightA {
    font-size: 14px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(42, 145, 254, 1);
  }

  .reviewsInfoHeaderRightB {
    font-size: 12px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }

  .reviewsInfoHeaderRightC {
    font-size: 12px;
    font-family: "PingFang-SC-Medium";
    font-weight: 500;
    line-height: 50px;
    color: rgba(231, 38, 27, 1);
  }

  .reviewsInfoHeaderRightD {
    font-size: 12px;
    line-height: 30px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-top: 20px;
  }

  .reviewsInfoHeaderRightE {
    font-size: 12px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .reviewsInfoHeaderRightF {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    line-height: 25px;
    color: #E7261B;
    font-size: 14px;
    font-family: "PingFang-SC-Medium";
    font-weight: 500;
  }

  /* 中心评论样式 */
  .reviewsInfoConent {
    width: 96%;
    margin-left: 4%;
    max-height: 640px;
    overflow: hidden;
    overflow-y: auto;
  }

  /* 头部标题 */
  .reviewsInfoConentTop {
    height: 50px;
    line-height: 50px;
    font-size: 0;
    border-bottom: 1px solid #E0E0E0;
  }

  .reviewsInfoConentTop p {
    display: inline-block;
    font-size: 16px;
    font-family: "PingFang-SC-Bold";
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
  }

  .reviewsInfoConentTop p:nth-child(1) {
    width: 34%;
  }

  .reviewsInfoConentTop p:nth-child(2) {
    width: 28%;
  }

  .reviewsInfoConentTop p:nth-child(3) {
    width: 28%;
  }

  .reviewsInfoConentTop p:nth-child(4) {
    width: 10%;
  }

  /* 循环评价框 */
  .reviewsInfoConentCenter {
    border-bottom: 1px solid #E0E0E0;
  }

  /* 单个内容 */
  .reviewsInfoConentCenterDiv {
    height: 134px;
    font-size: 0;
    display: flex;
    justify-content: center;
  }

  .reviewsInfoConentCenterDivDiv {
    display: inline-block;
    overflow: hidden;
  }

  .reviewsInfoConentCenterDivA {
    width: 34%;
  }

  .reviewsInfoConentCenterDivB {
    width: 28%;
  }

  .reviewsInfoConentCenterDivC {
    width: 28%;
  }

  .reviewsInfoConentCenterDivD {
    width: 10%;
  }

  .reviewsInfoConentCenterDivA p:nth-child(1) {
    width: 230px;
    height: 75px;
    overflow: hidden;
    overflow-y: auto;
    font-size: 14px;
    font-family: "PingFang-SC-Medium";
    font-weight: 500;
    color: rgba(26, 26, 26, 1);
    line-height: 24px;
    margin-top: 15px;
  }

  .reviewsInfoConentCenterDivA p:nth-child(2) {
    font-size: 12px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-top: 10px;
  }

  .reviewsInfoConentCenterDivB {
    height: 134px;
    font-size: 14px;
    font-family: "PingFang-SC-Bold";
    font-weight: bold;
    color: rgba(26, 26, 26, 1);
  }

  .reviewsInfoConentCenterDivB p {
    width: 80%;
    line-height: 20px;
    margin-top: 15px;
  }

  .reviewsInfoConentCenterDivB p span {
    color: #2A91FE;
  }

  .reviewsInfoConentCenterDivC {
    margin-top: 15px;
  }

  .reviewsInfoConentCenterDivC P {
    font-size: 14px;
    font-family: "PingFang-SC-Medium";
    font-weight: 500;
    color: rgba(42, 145, 254, 1);
    line-height: 22px;
  }

  .reviewsInfoConentCenterDivC P:nth-child(4) {
    font-size: 12px;
    color: rgba(231, 38, 27, 1);
    margin-top: 10px;
  }

  .reviewsInfoConentCenterDivD p {
    display: inline-block;
    padding: 5px;
    font-size: 12px;
    font-size: 16px;
    line-height: 20px;
    font-family: "PingFang-SC-Medium";
    font-weight: 500;
    color: #999999;
    margin-top: 100px;
    cursor: pointer;
  }

  .reviewsInfoConentCenterDivD p i {
    margin-right: 5px;
  }

  #red {
    color: #F7291D;
  }

  /* 单个回复 */
  .reviewsInfoConentCenterDivTwo {
    height: 81px;
    overflow: hidden;
    border-top: 2px dashed #E0E0E0;
  }

  .reviewsInfoConentCenterDivTwoA {
    margin: 10px auto;
  }

  .reviewsInfoConentCenterDivTwoA i {
    color: #EB3E31;
    font-size: 22px;
  }

  .reviewsInfoConentCenterDivTwoA span:nth-child(2) {
    font-size: 16px;
    font-family: "PingFang-SC-Bold";
    font-weight: bold;
    color: rgba(235, 62, 49, 1);
    margin: 0 5px;
  }

  .reviewsInfoConentCenterDivTwoA span:nth-child(3) {
    font-size: 12px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }

  .reviewsInfoConentCenterDivTwoB {
    height: 30px;
    overflow: hidden;
    overflow-y: auto;
    margin-left: 30px;
    font-size: 14px;
    font-family: "PingFang-SC-Bold";
    font-weight: 500;
    color: rgba(26, 26, 26, 1);
  }

  /* 底部分页器样式 */
  .reviewsInfoFooter {
    margin-top: 20px;
    margin-right: 20px;
  }


  /* 回复消息弹框 */
  .writeBackWrap {
    position: fixed;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .writeBack {
    width: 810px;
    height: 190px;
    padding: 20px 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(204, 204, 204, 0.5);
  }

  .writeBackA span:nth-child(1) {
    font-size: 16px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }

  .writeBackA span:nth-child(2) {
    float: right;
    font-size: 26px;
    padding: 0 5px;
    margin-top: -10px;
    cursor: pointer;
  }

  .writeBackB {
    margin-top: 20px;
    position: relative;
  }

  .writeBackB textarea {
    width: 780px;
    height: 70px;
    padding: 10px;
    font-size: 14px;
    font-family: "PingFang-SC-Bold";
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(42, 145, 254, 1);
  }

  .writeBackB p {
    position: absolute;
    right: 15px;
    bottom: 10px;
  }

  .writeBackC {
    height: 30px;
    float: right;
    margin-top: 20px;
    margin-right: 10px;
  }

  .writeBackC span {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    background: rgba(245, 245, 245, 1);
    border: 1px solid rgba(224, 224, 224, 1);
    border-radius: 5px;
    margin-left: 20px;
    cursor: pointer;
  }
</style>
